<template>
    <div class="box">
        <div class="box-1">用户管理</div>
        <el-table border :data="list" stripe style="width: 100%">
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column prop="username" label="用户名" width="180"></el-table-column>
            <el-table-column prop="email" label="邮箱"></el-table-column>
            <el-table-column prop="phone" label="电话"></el-table-column>
            <el-table-column prop="createTime" label="注册时间">
                <template slot-scope="scope">{{ scope.row.createTime | formatDate }}</template>
            </el-table-column>
        </el-table>
        <!-- 公共组件分页器 -->
        <sorter :total="total" v-on:sorter="handleCurrentChange"></sorter>
    </div>
</template>
<script>
import { UserList } from "@/request/http";
import { List } from "@/request/http";
import sorter from "@/common/sorter"         //公共组件分页器
   export default {
        name:'UserList',
        components:{
            sorter
        },
        data() {
            return {
                list:[],
                total:0
            };
        },
        methods:{
            //用户列表       异步请求
            async BeforeMethod(){
                const res = await UserList({
                    pageNum:1
                })
                this.total=res.data.data.total
                this.list=res.data.data.list
            },
            //用户列表分页器
            handleCurrentChange(val){      //  val 页码
                // this.page=val
                List(val)
                .then(data=>{
                    data = data.data.data
                    this.list=data.list
                })
            },
        },
        mounted(){
            this.BeforeMethod()
            // this.$myfn()
            // console.log(this.formatDate)
        },
   };
</script>
<style lang="scss" scoped>

@import "@/Scss/index.scss";
.box{
    height: 92vh;overflow: scroll;
    padding: 0rem 2rem 5rem 2rem;
    background: #F3F3F3;
}
.box-1{
    @include FontOnly(2rem);
    @include Pd(1rem 0 1rem 0);
}

</style>